<template>
  <el-dialog
    :title="title"
    :visible.sync="connectVisible"
    width="500px"
    :before-close="cancel"
    :buttonShow.sync="buttonShowUp"
    :roomId.sync="roomId"
    :unRoomId.sync="unRoomId"
  >
<!--    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="auto">-->
<!--      <el-form-item  prop="name">-->
<!--        <el-input-->
<!--          v-model="queryParams.name"-->
<!--          placeholder="输入姓名查询"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item  prop="phone">-->
<!--        <el-input-->
<!--          v-model="queryParams.phone"-->
<!--          placeholder="输入电话查询"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>-->
<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <el-button type="primary"  v-if="buttonShowUp" size="mini" @click="addConnectResidents" style="margin-bottom: 20px; float: right">添加关联</el-button>
    <el-button type="primary"  v-if="!buttonShowUp" size="mini" @click="delConnectResidents" style="margin-bottom: 20px; float: right">取消关联</el-button>
    <el-table v-loading="loading" :data="residentList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="联系电话" align="center" prop="phone" />
      <el-table-column label="性别" align="center" prop="sex" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
    </el-table>
<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->
  </el-dialog>
</template>

<script>
import {listResident} from "../../../api/system/resident";
import {addRoomsResident, delRoomsResident} from "../../../api/system/roomsResident";

export default {
  name: "connectResidents",
  dicts:['sys_user_sex'],
  props: {
    visible:{
      type:Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    reset: {
      type: Function,
      required: true
    },
    roomId: {
      type: Number,
      required: true
    },
    unRoomId: {
      type: Number,
      required: true
    },
    getList: {
      type: Function,
      required: true
    },
    buttonShow:{
      type: Boolean,
      required: true
    }
  },
  data(){
    return {
      residentList: [],
      connectVisible: false,
      buttonShowUp:false,
      queryParameter:{},
      queryParams: {
        pageNum: 1,
        pageSize: 2,
        name: null,
        phone: null,
        sex: null,
      },
      loading: true,
      selectId: [],
      roomsResident: {},
      // 总条数
      total: 0,
      // 显示搜索条件
      showSearch: true,
    }
  },
  watch:{
    visible(n){
      this.connectVisible = n
    },
    buttonShow(n){
      this.buttonShowUp = n
    },
    roomId(){
      this.residentList = []
      this.queryParameter.roomId = this.roomId
      listResident(this.queryParameter).then(res => {
        this.residentList = res.rows
        this.loading = false
      })
    },
    unRoomId(){
      this.residentList = []
      this.queryParameter.unRoomId = this.unRoomId
      listResident(this.queryParameter).then(res => {
        this.residentList = res.rows
        this.loading = false
      })
    }
  },
  methods: {

    /** 关闭弹窗方法 */
    cancel() {
      this.$emit("update:visible", false)
      this.$emit("update:buttonShow", false)
      this.$emit("update:roomId", 0)
      this.$emit("update:unRoomId", 0)
      this.queryParameter.roomId = null
      this.queryParameter.unRoomId = null
    },

    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.selectId = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },

    /** 新增关联操作 */
    addConnectResidents(){
      this.roomsResident = {
        roomId: this.queryParameter.unRoomId,
        residentId: this.selectId[0]
      }
      addRoomsResident(this.roomsResident)
      this.getList()
      this.$emit("update:visible", false)
    },

    /** 取消关联操作 */
    delConnectResidents(){
      this.roomsResident = {
        roomId: this.queryParameter.roomId,
        residentId: this.selectId[0]
      }
      // console.log(this.roomsResident)
      delRoomsResident(this.roomsResident)
      this.getList()
      this.$emit("update:visible", false)
    },

    /** 模糊查询 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      listResident(this.queryParams).then(response => {
        this.residentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    resetQuery(){
      this.queryParams = []
      listResident(this.queryParams).then(response => {
        this.residentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  }
}
</script>
